<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>请求示例</title>
</head>

<body>
  <button id="requestBtn">发送请求</button>
  <div id="message"></div>

  <!-- 遮罩层样式 -->
  <style>
    #overlay {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      text-align: center;
      padding-top: 200px;
      color: white;
    }
  </style>

  <!-- 遮罩层HTML -->
  <div id="overlay">
    <p>请等待...</p>
  </div>

  <script>
    document.getElementById('requestBtn').addEventListener('click', function () {
      // 显示遮罩层
      var overlay = document.getElementById('overlay');
      overlay.style.display = 'block';

      // 显示请等待消息
      var messageDiv = document.getElementById('message');
      messageDiv.innerHTML = '请等待...';

      // 设置超时时间
      var timeout = 5000; // 5秒
      var timeoutId = setTimeout(function () {
        // 超时处理
        overlay.style.display = 'none';
        messageDiv.innerHTML = '请求超时，请重试！';
      }, timeout);

      // 发送请求（这里用setTimeout模拟）
      setTimeout(function () {
        // 请求成功处理
        clearTimeout(timeoutId); // 清除超时定时器
        overlay.style.display = 'none';
        messageDiv.innerHTML = '请求成功！';
      }, 3000); // 假设请求在3秒后成功
    });
  </script>
</body>

</html>